<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>Hello APP</title>
    <link rel="stylesheet" type="text/css" href="../css/app.css" />
    <link rel="stylesheet" type="text/css" href="../css/base.css" />
    <link rel="stylesheet" type="text/css" href="../css/iconfont.css">
    <link href="../script/swiper/swiper.min.css" rel="stylesheet" />
    <style type="text/css">
    html,body{
        height: auto;
    }
    
    	
    .swiper-pagination { bottom: -5px !important; }

    </style>
</head>
<body class="">
	
	<div class="H-padding-10 H-theme-background-color-white">
        <div class="H-search H-flexbox-horizontal H-box-sizing-border-box  H-theme-background-color-f4f4f4 H-border-radius-3 H-overflow-hidden">
            <span class="H-icon H-display-block H-padding-horizontal-right-0 H-margin-horizontal-left-10 H-vertical-middle"><i class="H-iconfont H-icon-search H-font-size-18 H-theme-font-color-ccc"></i></span>
            <input type="search" name="keyword" id="keyword" placeholder="请输入关键字" class="H-border-none H-theme-background-color-transparent H-flex-item H-font-size-14 H-padding-horizontal-both-10 H-padding-vertical-both-5 H-vertical-align-middle">
            <button onclick="so_keyword();" class="H-button H-font-size-15 H-outline-none H-padding-vertical-both-5 H-padding-horizontal-both-20 H-theme-background-color-497bf0 H-theme-font-color-white H-theme-border-color497bf0 " style="min-width:0;">搜索</button>
        </div>
    </div>
    
    <div class="H-padding-vertical-bottom-10"></div>
    <div class="H-channel-title H-flexbox-horizontal H-theme-background-color-white H-vertical-middle">
        <div class="H-channel-line H-theme-background-color-444 H-padding-vertical-top-15 H-padding-horizontal-left-3  H-margin-horizontal-left-10"></div>
        <div class="H-channel-text H-theme-font-color-444 H-flex-item H-font-size-14  H-padding-10 H-margin-horizontal-right-10 H-text-show-row-1">热门搜索</div>
    </div>
    
    <div class="H-padding-10 H-theme-background-color-white H-theme-font-color497bf0 H-font-size-14">
		<!--<span onclick="click_kw('刀剑神域')"  class="H-badge H-display-inline-block">
			<label class="H-display-inline-block H-vertical-middle  H-theme-border-color497bf0 padding-both-2">刀剑神域</label>
		</span>
		<span onclick="click_kw('奔跑吧')"  class="H-badge H-display-inline-block">
			<label class="H-display-inline-block H-vertical-middle  H-theme-border-color497bf0 padding-both-2">奔跑吧</label>
		</span>
		<span onclick="click_kw('天天向上')"  class="H-badge H-display-inline-block">
			<label class="H-display-inline-block H-vertical-middle  H-theme-border-color497bf0 padding-both-2">天天向上</label>
		</span>
		
		<span onclick="click_kw('你和我的倾城时光')"  class="H-badge H-display-inline-block">
			<label class="H-display-inline-block H-vertical-middle  H-theme-border-color497bf0 padding-both-2">你和我的倾城时光</label>
		</span>-->
		 <div id="hotlist"></div>
    </div>
  
  
    <div class="H-padding-vertical-bottom-10"></div>
    <div class="H-channel-title H-flexbox-horizontal H-theme-background-color-white H-vertical-middle H-border-vertical-bottom-after">
        <div class="H-channel-line H-theme-background-color-444 H-padding-vertical-top-15 H-padding-horizontal-left-3  H-margin-horizontal-left-10"></div>
        <div class="H-channel-text H-theme-font-color-444 H-flex-item H-font-size-14  H-padding-10 H-margin-horizontal-right-10 H-text-show-row-1">热门搜索</div>
    </div>
    
    <div id="list"></div>
     <script  id="so_list" type="text/x-dot-template">
	    {{? it && it.length > 0}}<!--it 就是传入的数组data 这里判断是否为真，数组元素是否大于0个 ?相当于if-->
			{{~ it :v}}<!--it 相当如js的foreach v就是data数组中的一个元素-->
		    <div onclick="click_kw('{{= v}}')" class="H-text-list H-flexbox-horizontal  H-theme-background-color-white H-border-vertical-bottom-after H-vertical-middle H-touch-active">
		    	<span class="H-icon H-display-block H-padding-horizontal-right-0 H-margin-horizontal-left-10 H-vertical-middle"><i class="H-iconfont H-icon-search H-font-size-14 H-theme-font-color-ccc"></i></span>
		        <div class="H-flex-item H-padding-horizontal-both-5 H-font-size-14 H-padding-vertical-both-12  H-theme-font-color497bf0">{{= v}}</div>
		    </div>
			{{~}}
		{{?}}<!--相当于/if -->
    </script>
    
    <script  id="hot_list" type="text/x-dot-template">
	    {{? it && it.length > 0}}<!--it 就是传入的数组data 这里判断是否为真，数组元素是否大于0个 ?相当于if-->
			{{~ it :v}}<!--it 相当如js的foreach v就是data数组中的一个元素-->
		    <span onclick="click_kw('{{= v.title}}')"  class="H-badge H-display-inline-block H-padding-vertical-both-5">
				<label class="H-display-inline-block H-vertical-middle  H-theme-border-color497bf0 padding-both-2">{{= v.title}}</label>
			</span>
			{{~}}
		{{?}}<!--相当于/if -->
    </script>


	<div onclick="clear_so();" class="H-text-list H-flexbox-horizontal  H-theme-background-color-white H-border-vertical-bottom-after H-vertical-middle H-touch-active">
        <div class="H-flex-item H-padding-horizontal-both-5 H-font-size-14 H-padding-vertical-both-12 H-center-all">清除搜索历史</div>
    </div>
  
	
    
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="../script/app.js"></script>
<script type="text/javascript" src="../script/doT.js"></script>
<script type="text/javascript">


    
	var sysconfig = "";//获取系统配置参数 , 参数内容在后台接口获取
	
	
    apiready = function(){
    	sysconfig = $api.getStorage('sysconfig');
    	
    	so_list = $api.getStorage('so_list');
    	if(typeof so_list =='undefined' || so_list ==null || so_list =='' ){
    		so_list = [];
    	}
    	
		api.parseTapmode();
		
		get_so_list();
		
		hotkw();
		
    };
    
    function hotkw(){
    	$app.ajax($app.serverUrl+"index/index/hotkw",{},'post',function(ret){
			if( ret.status == 1000){
				var evalText = doT.template($("#hot_list").text());
				$("#hotlist").html(evalText(ret.data));
			}
		});
    }
    
    function get_so_list(){
    	$("#list").html("");
    	var evalText = doT.template($("#so_list").text());
		$("#list").html(evalText(so_list));
					
    }
    
    
    function so_keyword(){
    	
    	keyword = $("#keyword").val();
    	
    	var is_arr = $.inArray(keyword,so_list);
    	if(is_arr == -1){
			so_list.unshift(keyword);
		}
    	
    	console.log(so_list);
    	$api.setStorage('so_list' , so_list);
    	$app.openWinByUrl('so_list' , 'so_list' ,{ 'keyword':keyword , 'title':'搜索'});
    	get_so_list();
    }
    
    function click_kw( kw ){
    	$app.openWinByUrl('so_list' , 'so_list' ,{ 'keyword':kw , 'title':'搜索'});
    }
    
    
    function clear_so(){
    	api.confirm({
        	title:'确认清空搜索记录？'
        },function(ret,err){
        	 var index = ret.buttonIndex;
        	 if( index == 2){
        	 	so_list = [];
        	 	$api.setStorage('so_list' , []);
        	 	get_so_list();
        	 }
        });
    }
    

	
</script>
</html>